import React from 'react';
import { useMap } from 'ahooks';
import { viewSizeFormat } from '@/common/format';
import { paddingZero } from '@/common/utils';

const Emoji = ({ className, style, tag, list, width, height, ...props }) => list.map((row, index) => {
  const curStyle = {
    ...style || {},
    width: `${viewSizeFormat(width)}px`,
    height: `${viewSizeFormat(height)}px`,
  };

  if (row.type === 'image') {
    return React.createElement(tag, {
      ...props,
      className,
      style: {
        background: row.value,
      },
      key: index,
    });
  }

  return React.createElement(tag, {
    ...props,
    className,
    style: curStyle,
    key: index,
  }, [row.label]);
});

Emoji.defaultProps = {
  list: [],
  tag: 'span',
  width: 36,
  height: 36,
};

// 获取emoji文件夹下的所有图片
const getEmojiList = () => {
  try {
    const files = require.context('@/assets/images/emoji', false, /.png$/);
    const arr = files.keys().map((item) => {
      const code = `[f${paddingZero((item.match(/emoji_(\d+)@/) || [])[1] || '', 3)}]`;
      const src = files(item).default || files(item);
      return [code, src];
    }).sort(([code1], [code2]) => +(code1.replace('f', '')) - +(code2.replace('f', '')));
    return arr;
  } catch (err) {
    return [];
  }
};

export default () => {
  // const [map, { get, set }] = useMap([
  //   ['[暗中观察]', require('@/assets/images/emoji/chat_face_anzhongguancha.png').default],
  //   ['[悠闲]', require('@/assets/images/emoji/chat_face_youxian.png').default],
  //   ['[等等]', require('@/assets/images/emoji/chat_face_dengdeng.png').default],
  //   ['[衰]', require('@/assets/images/emoji/chat_face_shuai.png').default],
  //   ['[嘘]', require('@/assets/images/emoji/chat_face_xu.png').default],
  //   ['[悲伤辣么大]', require('@/assets/images/emoji/chat_face_beishsangnameda.png').default],
  //   ['[吐血]', require('@/assets/images/emoji/chat_face_tuxue.png').default],
  //   ['[色]', require('@/assets/images/emoji/chat_face_se.png').default],
  //   ['[愤怒]', require('@/assets/images/emoji/chat_face_fanu.png').default],
  //   ['[喝酒]', require('@/assets/images/emoji/chat_face_hejiu.png').default],
  //   ['[奸笑]', require('@/assets/images/emoji/chat_face_jianxiao.png').default],
  //   ['[吃瓜]', require('@/assets/images/emoji/chat_face_chigua.png').default],
  //   ['[鼓掌]', require('@/assets/images/emoji/chat_face_guzhang.png').default],
  //   ['[哭笑]', require('@/assets/images/emoji/chat_face_xiaoku.png').default],
  //   ['[吐]', require('@/assets/images/emoji/chat_face_tu.png').default],
  //   ['[惊讶]', require('@/assets/images/emoji/chat_face_jingya.png').default],
  //   ['[失敬]', require('@/assets/images/emoji/chat_face_shijing.png').default],
  //   ['[机智]', require('@/assets/images/emoji/chat_face_jizhi.png').default],
  //   ['[你放屁]', require('@/assets/images/emoji/chat_face_nifangpi.png').default],
  //   ['[肥]', require('@/assets/images/emoji/chat_face_fei.png').default],
  //   ['[很棒]', require('@/assets/images/emoji/chat_face_henbang.png').default],
  //   ['[流泪]', require('@/assets/images/emoji/chat_face_liulei.png').default],
  //   ['[同意]', require('@/assets/images/emoji/chat_face_tongyi.png').default],
  //   ['[看好你]', require('@/assets/images/emoji/chat_face_kanhaoni.png').default],
  // ]);

  const emojiList = getEmojiList();
  const [map, { get, set }] = useMap(emojiList);

  const nameFormat = (name) => name.replace(/^\[/, '').replace(/]$/, '');
  const mapKeys = Array.from(map.keys());
  const list = mapKeys.map((name) => ({
    label: nameFormat(name),
    value: name,
    image: get(name),
  }));
  const regExp = new RegExp(`(\\[(?:${mapKeys.map(nameFormat).join('|')})\\])`);

  const normalName = (name) => `[${nameFormat(name)}]`;
  const getHandle = (name) => get(normalName(name));
  const setHandle = (name, url) => set(normalName(name), url);
  const parseHandle = (txt) => txt.split(regExp).filter(Boolean);
  const parse2ArrayHandle = (txt) => parseHandle(txt).map((name) => {
    const src = getHandle(name);
    if (src) {
      return {
        label: nameFormat(name),
        value: src,
        type: 'image',
      };
    }
    return {
      label: name,
      value: name,
      type: 'text',
    };
  });
  const EmojiHoc = ({ text, ...props }) => React.createElement(Emoji, { ...props, list: parse2ArrayHandle(text) });

  return { list, set: setHandle, get: getHandle, parse2Array: parse2ArrayHandle, Emoji: EmojiHoc };
};
